<template>
  <view class="mall-cell marginB10 relative" @click="showDetail">
    <image :src="data.mallGoodsVO.cover" mode="widthFix" class="image" />
    <view class="paddingX8 paddingT8 font1 pre-wrap bold relative">
      {{ data.mallGoodsVO.name }}
    </view>
    <view class="flex-align-between paddingX8 paddingT5 paddingB7 width100">
      <view v-if="data.mallGoodsVO.residue === 0" class="presell_over"
        >已售罄</view
      >
      <view v-else class="presell">限时秒杀价</view>
      <view class="flex-baseline">
        <view class="font4">¥</view>
        <view class="bold paddingL1 spike_price">{{ data.subjectPrice }}</view>
      </view>
    </view>
    <view class="spike_total">
      <view class="flex goods">
        <view class="goods_lave">
          {{ data.mallGoodsVO.residue }}
        </view>
        <view class="goods_slash marginX4">/</view>
        <view class="goods_total">
          {{ data.mallGoodsVO.inventoryQuantity }}
        </view>
      </view>
      <image class="img" :src="resource.spike_num" />
    </view>
  </view>
</template>
<script>
import resource from '@/utils/resource';
export default {
  props: {
    data: Object,
    skipeType: String,
    startTime: String,
  },
  data() {
    return {
      resource,
    };
  },
  computed: {},
  methods: {
    showDetail() {
      if (this.data.mallGoodsVO.residue === 0) return;
      let self = this
      uni.navigateTo({
        url:
          '/subPackages/pages/product/index?id=' +
          self.data.mallGoodsVO.id +
          '&skipeType=' +
          self.skipeType +
          '&startTime=' +
          self.startTime +
          '&subjectId=' +
          self.data.subjectId,
      });
      // this.$router.push('product', {
      //     id: this.data.mallGoodsVO.id,
      //     subjectId: this.data.subjectId,
      //     skipeType: this.skipeType,
      //     startTime: this.startTime
      // })
    },
  },
};
</script>
<style lang="scss" scoped>
.mall-cell {
  color: #fff;
  overflow: hidden;
  border-radius: 16rpx;
  background: #000;
  display: inline-block;
  width: 100%;
  box-shadow: 0px 0px 4px 0px rgba(167, 110, 244, 0.25);
  .image {
    height: 0;
    width: 100%;
  }
  .presell {
    float: left;
    background: $color-theme;
    width: 144rpx;
    height: 46rpx;
    line-height: 46rpx;
    font-size: 24rpx;
    border-radius: 5rpx;
    color: #fff;
    text-align: center;
    margin-right: 10rpx;
    text-shadow: none;
  }
  .presell_over {
    float: left;
    background: linear-gradient(#f5cdd4, #fbf0d5);
    width: 144rpx;
    height: 46rpx;
    line-height: 46rpx;
    font-size: 24rpx;
    border-radius: 5rpx;
    color: #bc3737;
    text-align: center;
    margin-right: 10rpx;
    text-shadow: none;
  }
  .spike_price {
    font-size: 40rpx;
  }
  .spike_total {
    position: absolute;
    top: 0;
    right: 0;
    width: 152rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 30rpx;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0rpx 16rpx 0rpx 16rpx;
    z-index: 2;
    .goods {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      .goods_lave {
        color: $color-theme;
        font-size: 46rpx;
        text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
      }
      .goods_slash {
        font-size: 46rpx;
        text-shadow: none;
      }
      .goods_total {
        text-shadow: none;
      }
    }

    .img {
      position: absolute;
      top: 14rpx;
      left: 20rpx;
      width: 116rpx;
      height: 40rpx;
      z-index: 1;
    }
  }
}
</style>
